<template>
  <el-table :data="tableData" border highlight-current-row ref="table" style="width: 100%;" size="mini"
            @row-click="rowClickHandle"
            @current-change="currentChangeHandle"
            :style="{height:height}">
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop"
                     :label="item.label" :width="item.width" show-overflow-tooltip>
      <template slot-scope="scope">
        <slot :name="item.prop" :row="scope.row"
              v-if="$scopedSlots[item.prop] || $slots[item.prop]"></slot>
        <span v-else-if="item.type=='date'">{{ scope.row[item.prop]|dateFormat }}</span>
        <span v-else-if="item.type=='dict'">{{ getDictName(scope.row[item.prop], item.dictType) }}</span>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="showOpt" :width="operaterWidth">
      <template slot-scope="scope">
        <slot name="operateButtons" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
import {listByType} from "@/api/dict";

export default {
  props: {
    tableData: {
      default: () => []
    },
    columns: {
      default: () => []
    },
    height: {
      default: '100%'
    },
    operaterWidth: {
      default: '120px'
    },
    showOpt: {
      default: true
    }
  },
  data() {
    return {
      dictMaps: {},
      lockMaps: {}
    }
  },
  component: {},
  computed: {},
  watch: {},
  methods: {
    rowClickHandle(e) {
      this.$emit('row-click', e)
    },
    currentChangeHandle(e) {
      this.$emit('current-change', e)
    },
    getDictName(value, type) {
      if(this.lockMaps[type]) {
        return
      }
      if (!this.dictMaps[type]) {
        //加锁
        this.$set(this.lockMaps, type, true)
        this.listByType(type).then(res => {
          this.$set(this.dictMaps, type, res.result)
          //释放锁
          this.$set(this.lockMaps, type, false)
          return this.getName(this.dictMaps[type], value);
        });
      } else {
        return this.getName(this.dictMaps[type], value);
      }
    },
    getName(list, value) {
      if (!value) return
      let item = list.filter(item => item.value == value)[0];
      if (!item) return
      return item.name
    },
    listByType(type) {
      return listByType(type);
    }
  }
}
</script>

<style scoped>

</style>
